<template>
  <div class="child com-flex-c">
    <div
      :class="['child-box com-flex-c com-center', { active_child: index === change }]"
      v-for="(item, index) in list"
      :key="index"
      @click="changeClick(index)"
    >
      <div class="title">{{ `${item?.type}(${item?.wmfName ?? "--"})` }}</div>
      <div class="position-frame com-flex-r com-center">
        <div class="com-flex-c com-center-r" style="gap: 20px">
          <div
            class="com-center-c all-margin com-flex-r"
            style="justify-content: space-between"
          >
            <div class="p-name">U位总容量</div>
            <div class="p-num">{{ item?.usum ?? "0" }}</div>
          </div>
          <div class="com-center-c com-flex-r" style="justify-content: space-between">
            <div class="p-name">空闲(U)位</div>
            <div class="p-num">{{ item?.leisureUu ?? "0" }}</div>
          </div>
        </div>
        <div class="percentage com-flex-c com-center">
          <div class="value">
            <span style="font-size: calc(var(--fs) * 1.2)">
              {{ item?.utilizationRate ?? "0" }}
              <span style="font-size: calc(var(--fs) * 0.6)">%</span>
            </span>
          </div>
          <p class="name">使用率</p>
        </div>
        <div class="com-flex-c com-center-r" style="gap: 20px">
          <div
            class="com-center-c all-margin com-flex-r"
            style="justify-content: space-between"
          >
            <div class="p-name">已使用(U)位</div>
            <div class="p-num">{{ item?.uuse ?? "0" }}</div>
          </div>
          <div class="com-center-c com-flex-r" style="justify-content: space-between">
            <div class="p-name">使用率</div>
            <div class="p-num">{{ item?.utilizationRate ?? "0" }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import ueMsg from "/public/js/app.js";
import api from "@/api";
import { computed, onMounted, ref } from "vue";

const list = ref([]);

const per = (all, use) => {
  const rate = (use / all) * 100;
  return rate.toFixed(2);
};

const change = ref(0);
const changeClick = (index) => {
  if (change.value !== index) {
    change.value = index;
    ueMsg.apiSend({ MenuStatus: ["2-2-1", "2-2-2", "2-2-3"][index] });
  }
};
const dataInit = async () => {
  const { data } = await api.space();
  console.log(data);
  if (data.length <= 0) {
    data.push({
      wmfName: "",
      type: "",
    });
  }
  if (list.value.length <= 0) {
    for (let i = 0; i < 3; i++) {
      list.value.push({
        type: ["U位使用情况", "功耗使用情况", "网络容量使用情况"][i],
      });
    }
  } else {
    list.value = data.map((item, i) => ({
      ...item,
      type: ["U位使用情况", "功耗使用情况", "网络容量使用情况"][i],
    }));
  }
};
onMounted(() => {
  dataInit();
  ueMsg.apiSend({ MenuStatus: "2-2-1" });
});
</script>

<style lang="scss" scoped>
.child {
  width: 100%;
  height: 100%;
  justify-content: space-between;

  .child-box {
    pointer-events: all;
    cursor: pointer;
    width: 100%;
    height: 32%;
    background: url("/imgs/20.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .title {
      background-image: linear-gradient(0deg, #b4bfcd 0%, #fbfdff 100%);
      -webkit-background-clip: text;
      font-size: calc(var(--fs) * 1.1);
      font-family: FZZongYi-M05S, FZZongYi-M05S-Regular;
      font-weight: 400;
      text-align: left;
      color: transparent;
      letter-spacing: 4.5px;
      background-clip: text;
    }

    .position-frame {
      margin-top: 2%;
      width: 95%;
      height: 58%;
      background: url("/imgs/4.png");
      // background-size: 98% 100%;
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position: center center;

      .all-margin {
        // justify-content: space-between;
        // margin-bottom: 2%;
      }

      .p-name {
        margin-right: 10px;
        font-size: calc(var(--fs) * 0.8);
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        font-weight: normal;
        text-align: left;
        color: #839ecb;
      }

      .p-num {
        background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 1) 100%);
        -webkit-background-clip: text;
        font-size: calc(var(--fs) * 1.2);
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        text-align: left;
        color: transparent;
      }

      .percentage {
        width: 30%;
        height: 100%;

        .value {
          font-family: DIN Alternate, DIN Alternate-Bold;
          font-weight: bold;
          text-align: left;
          color: #d5e5ff;
          letter-spacing: -0.22px;
        }

        .name {
          font-size: calc(var(--fs) * 0.55);
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #d5e5ff;
          line-height: 18px;
          letter-spacing: 3px;
        }
      }
    }
  }

  .active_child {
    background-color: rgba(61, 94, 173, 0.29);
  }
}
</style>
